<template>
  <div>
    <MainHead :refresh="false"
              :title="pageTitle" />
    <el-card class="main-card"
             shadow="never"
             v-loading="$store.state.loading">
      <el-form ref="form"
               label-width="100px">
        <el-date-picker v-model="form.statisticsYear"
                        type="year"
                        style="width: 210px"
                        value-format='yyyy'
                        placeholder="选择年份"
                        :disabled="type === 3">
        </el-date-picker>
      </el-form>
      <div class="tabHader">
        <div class="tabHader-item">
          类 别
        </div>
        <div class="tabHader-item">
          一级指标
        </div>
        <div class="tabHader-item">
          二级指标
        </div>
        <!-- <div class="tabHader-item">
        三级指标
      </div> -->
        <div class="tabHader-item">
          分值
        </div>
      </div>
      <!-- <div class="tabbody">
      <div class="tabbody-item">
        <div class="tabbody-item-type">
          政治素养
          坚定
          （20分）
        </div>
        <div class="itembig">
          <div class="item">
            <div class="tabbody-item-one">
              1.政治忠诚可靠
            </div>
            <div class="itembig">
              <div class="item">
                <div class="tabbody-item-tow">
                  深入学习贯彻习近平新时代中国特色社会主义思想，增强“四个意识”、坚定“四个自信”、做到“两个维护”，党员对中央和省委、市委、区委重要会议和文件精神做到应知应会（1分）；严格遵守党的政治纪律和政治规矩（0.5分），自觉维护党的领导，对党忠诚（0.5分）；党员每年集中学习培训时间一般不少于32学时（2分）
                </div>
                <div class="itembig">
                  <div class="item">
                    <div class="tabbody-item-three"></div>
                    <div class="input"></div>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="tabbody-item-tow">
                  深入学习贯彻习近平新时代中国特色社会主义思想，增强“四个意识”、坚定“四个自信”、做到“两个维护”，党员对中央和省委、市委、区委重要会议和文件精神做到应知应会（1分）；严格遵守党的政治纪律和政治规矩（0.5分），自觉维护党的领导，对党忠诚（0.5分）；党员每年集中学习培训时间一般不少于32学时（2分）
                </div>
                <div class="itembig">
                  <div class="item">
                    <div class="tabbody-item-three"></div>
                    <div class="input"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="tabbody-item-one">
              1.政治忠诚可靠
            </div>
            <div class="itembig">
              <div class="item">
                <div class="tabbody-item-tow">
                  深入学习贯彻习近平新时代中国特色社会主义思想，增强“四个意识”、坚定“四个自信”、做到“两个维护”，党员对中央和省委、市委、区委重要会议和文件精神做到应知应会（1分）；严格遵守党的政治纪律和政治规矩（0.5分），自觉维护党的领导，对党忠诚（0.5分）；党员每年集中学习培训时间一般不少于32学时（2分）
                </div>
                <div class="itembig">
                  <div class="item">
                    <div class="tabbody-item-three"></div>
                    <div class="input"></div>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="tabbody-item-tow">
                  深入学习贯彻习近平新时代中国特色社会主义思想，增强“四个意识”、坚定“四个自信”、做到“两个维护”，党员对中央和省委、市委、区委重要会议和文件精神做到应知应会（1分）；严格遵守党的政治纪律和政治规矩（0.5分），自觉维护党的领导，对党忠诚（0.5分）；党员每年集中学习培训时间一般不少于32学时（2分）
                </div>
                <div class="itembig">
                  <div class="item">
                    <div class="tabbody-item-three"></div>
                    <div class="input"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
      <table class="table">
        <tbody>
          <template v-for="one in dataList">
            <template v-for="(two,b) in one.children">
              <template v-for="(three,c) in two.children">
                <tr :key='three.id'>
                  <template v-if="b==0">
                    <td class="tdOne"
                        :rowspan="getRowNum(one.children)">{{one.criteria.criteriaName}}({{one.criteria.criteriaScore}}分)</td>
                  </template>
                  <template v-if="c==0">
                    <td class="tdTow"
                        :rowspan="two.children.length">{{two.criteria.criteriaName}}({{two.criteria.criteriaScore}}分)</td>
                  </template>
                  <td class="tdThree">{{three.criteria.criteriaName}}</td>
                  <td class="tdFour">
                    <el-input v-model.number="three.score"
                              placeholder="分值"
                              @input='inputChange(three, $event)'
                              type='number'
                              :disabled="type === 3"></el-input>
                  </td>
                </tr>
              </template>
            </template>
          </template>
        </tbody>
      </table>
      <div class="footer-btn">
        <el-button style="color: #d03539; border-color: #d03539; padding: 12px 27px"
                   @click="$router.push(homePage)">取消</el-button>
        <el-button style="padding: 12px 27px"
                   type="primary"
                   @click="submit()">保存</el-button>
      </div>
    </el-card>
  </div>
</template> 

<script>
import store from "../../../store"
export default {
  data () {
    return {
      form: {
        criteriaScoreList: [],
        fkRuralId: '',
        statisticsYear: ''
      },
      homePage: '/rural_criteria_score',
      suffix: '指标评分',
      dataList: [],
      action: {
        def: '/ruralCriteriaScore/save',
        getListThree: '/ruralCriteriaScore/listCriteriaScoreThree',
        getDept: '/accountDept/listSelectDeptNames',
        getListThreeTow: '/ruralCriteriaScore/listThree'
      },
      type: 1
    }
  },
  created () {
    this.type = this.$route.meta.type
    this.form.fkRuralId = store.state.userInfo.deptList[0].id
    if (this.$route.meta.type === 1) {
      // this.getListThree(store.state.userInfo.deptList[0].id)
      this.getListThreeTow(store.state.userInfo.deptList[0].id)
    } else {
      this.getListThree(localStorage.getItem('id'))
    }
  },
  methods: {
    getListThreeTow (id) {
      this.$Ajax(
        this.action.getListThreeTow,
        "get",
        {
          fkRuralId: id
        },
        (res) => {
          this.dataList = res.data
          this.form.statisticsYear = (res.data[0] && res.data[0].statisticsYear && res.data[0].statisticsYear.toString()) || ''
        }
      );
    },
    getCriteriaScoreList (list) {
      const newLIst = []
      list.forEach(item => {
        if (item.children.length !== 0) {
          item.children.forEach(items => {
            if (items.children.length !== 0) {
              items.children.forEach(itemss => {
                if (itemss.score !== undefined && itemss.score !== null) {
                  newLIst.push({ fkCriteriaId: itemss.fkCriteriaId, score: itemss.score * 1 })
                }
              })
            }
          })
        }
      })
      return newLIst
    },
    submit () {
      this.form.criteriaScoreList = this.getCriteriaScoreList(this.dataList)
      // this.form.statisticsYear = this.form.statisticsYear * 1
      this.$Ajax(
        this.action.def,
        'post',
        {
          ...this.form,
          statisticsYear: this.form.statisticsYear * 1
        },
        (res) => {
          this.$message.success(res.message)
          this.$router.push(this.homePage)
        }
      )
    },
    inputChange (item, value) {
      console.log(item, value)
    },
    // 获取详情数据
    getListThree (id) {
      this.$Ajax(
        this.action.getListThree,
        "get",
        {
          approvalId: id
        },
        (res) => {
          this.dataList = res.data
          this.form.statisticsYear = (res.data[0] && res.data[0].statisticsYear && res.data[0].statisticsYear.toString()) || ''
        }
      );
    },
    getRowNum (towList) {
      let num = 0;
      for (let i in towList) {
        num += towList[i].children.length;
      }
      return num;
    }
  },
  computed: {
    pageTitle () {
      const titlelist = ['', '新增', '修改', '查看']
      return titlelist[this.$route.meta.type] + this.suffix
    },
  }
}
</script>

<style lang="scss" scoped>
.footer-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
/deep/.el-input__inner {
  padding-right: 0px;
}
.table {
  border-collapse: separate;
  border-spacing: 0px;
  .tdOne {
    border: 1px solid #e7e7e7;
    padding: 10px;
    width: 10.75%;
  }
  .tdTow {
    border: 1px solid #e7e7e7;
    padding: 10px;
    width: 16.56%;
  }
  .tdThree {
    border: 1px solid #e7e7e7;
    padding: 10px;
  }
  .tdFour {
    border: 1px solid #e7e7e7;
    padding: 10px;
    width: 10.68%;
  }
}
.tabHader {
  display: flex;
  border: 1px solid #e7e7e7;
  text-align: center;
  background-color: #fafafa;
  margin-top: 15px;
  .tabHader-item:nth-child(1) {
    width: 10%;
    border-right: 1px solid #e7e7e7;
    padding: 10px;
  }
  .tabHader-item:nth-child(2) {
    width: 16%;
    border-right: 1px solid #e7e7e7;
    padding: 10px;
  }
  .tabHader-item:nth-child(3) {
    width: 64%;
    border-right: 1px solid #e7e7e7;
    padding: 10px;
  }
  .tabHader-item:nth-child(4) {
    width: 10%;
    padding: 10px;
  }
}
.tabbody {
  border: 1px solid #e7e7e7;
}
.tabbody-item {
  display: flex;
}
.item {
  display: flex;
  flex: 1;
}
.itembig {
  width: 100%;
}
.tabbody-item-type {
  display: flex;
  width: 10.5%;
  text-align: center;
  border-right: 1px solid #e7e7e7;
  padding: 10px;
  justify-content: center;
  align-items: center;
}
.tabbody-item-one {
  display: flex;
  width: 17.6%;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  justify-content: center;
  align-items: center;
}
.tabbody-item-one:last-child {
  border-bottom: 0px;
}
.tabbody-item-tow {
  display: flex;
  width: 72.7%;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  justify-content: center;
  align-items: center;
}
.tabbody-item-three {
  display: flex;
  width: 72.7%;
  border-right: 1px solid #e7e7e7;
  padding: 10px;
  justify-content: center;
  align-items: center;
  .input {
    flex: 1;
    padding: 10px;
  }
}
</style>